<template>
  <div>
    <span class="append-button-group margin-right">
      <el-button type="text" size="small" icon="el-icon-refresh" class="text-danger" @click="refreshConnections" />
    </span>
    <el-select v-model="connName" filterable clearable placeholder="选择连接" size="small" @change="switchConnection">
      <el-option
        v-for="connection in connections"
        :key="connection"
        :label="connection"
        :value="connection"
      />
    </el-select>

    <template v-if="catalogs.length > 0">
      <el-select v-model="namespace.catalog" class="margin-left" filterable clearable placeholder="选择 catalog" size="small" @change="switchNamespace('catalog')">
        <el-option
          v-for="catalog in catalogs"
          :key="catalog"
          :label="catalog"
          :value="catalog"
        />
      </el-select>
    </template>
    <template v-if="schemas.length > 0">
      <el-select v-model="namespace.schema" class="margin-left" filterable clearable placeholder="选择 schema" size="small" @change="switchNamespace('schema')">
        <el-option
          v-for="schema in schemas"
          :key="schema.schema"
          :label="schema.schema"
          :value="schema.schema"
        />
      </el-select>
    </template>
  </div>
</template>

<script>

import database from '@/api/database'
import core from '@/api/core'

export default {
  name: 'DataSourceChose',
  data(){
    return {
      connName: null,
      namespace: {
        catalog: null,
        schema: null,
      },
      connections: [],
      catalogs: [],
      schemas: []
    }
  },
  methods: {
    switchConnection(val){
      this.connName = val;
      this.$emit('changeConnName',val)

      this.catalogs.length = 0 ;
      this.schemas.length = 0;

      if (this.connName){
        database.catalogs(this.connName).then(res => {
          this.catalogs = res.data;
          if (this.catalogs && this.catalogs.length > 0){
            this.namespace.catalog = this.catalogs[0];
            this.$emit('changeNamespace',this.namespace)
            this.switchNamespace('catalog')
          }else {
            database.schemas(this.connName).then(res => {
              this.schemas = res.data;
              if (this.schemas && this.schemas.length > 0){
                this.namespace.schema = this.schemas[0].schema;
                this.$emit('changeNamespace',this.namespace)
              }
            })
          }
        })
      }
    },
    refreshConnections(){
      core.security.moduleConnectNames('database').then(res => {
        this.connections = res.data;
      })
    },
    switchNamespace(which){
      if (which === 'catalog'){
        this.$emit('changeNamespace',this.namespace)
        this.schemas.length = 0 ;
        database.catalogSchemas(this.connName,this.namespace.catalog).then(res => {
          this.schemas = res.data;
          if (this.schemas && this.schemas.length > 0){
            this.namespace.schema = this.schemas[0].schema;
          }
        })
      }else if (which === 'schema'){
        this.$emit('changeNamespace',this.namespace)
      }

    },
    getConnName(){
      return this.connName;
    },
    getNamespace(){
      return this.namespace;
    }
  },
  mounted() {
    this.refreshConnections();
  }
}
</script>


